<!--
 * @Author: Bennent_G
 * @Date: 2024-12-26 14:46:50
 * @LastEditTime: 2025-01-17 11:16:06
 * @Description:
-->
<template>
	<!-- search -->
	<a-collapse class="page-header-container mb-16" v-model:activeKey="activeKey" :bordered="false">
		<a-collapse-panel key="1" header="搜索">
			<a-form layout="inline" :model="searchForm">
				<a-form-item label="昵称">
					<a-input v-model="searchForm.nickName" placeholder="请输入" />
				</a-form-item>
				<a-form-item label="手机号">
					<a-input v-model="searchForm.mobile" placeholder="请输入" />
				</a-form-item>
				<a-form-item label="性别">
					<a-select v-model="searchForm.sex" placeholder="请选择性别">
						<a-select-option value="">全部</a-select-option>
						<a-select-option value="1">男</a-select-option>
						<a-select-option value="0">女</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="状态">
					<a-select v-model="searchForm.sex" placeholder="请选择">
						<a-select-option value="">全部</a-select-option>
						<a-select-option value="1">正常</a-select-option>
						<a-select-option value="0">禁用</a-select-option>
					</a-select>
				</a-form-item>
				<a-space :size="16">
					<a-button>重置</a-button>
					<a-button type="primary">搜索</a-button>
				</a-space>

			</a-form>
		</a-collapse-panel>
	</a-collapse>
	<!-- table -->
	<div class="page-container">
		<div>
			<a-button type="primary" size="small" @click="openModal('add')">新增</a-button>
		</div>
		<a-divider style="margin: 8px 0;"></a-divider>
		<a-table :columns="columns" :data-source="data" :loading="loading">
			<template #bodyCell="{ text, record, column }">
				<template v-if="column.key === 'avatar'">
					<a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
				</template>
				<template v-if="column.key === 'sex'">
					<a-tag :color="record.sex ? 'green' : 'red'">{{ text === 1 ? '男' : '女' }}</a-tag>
				</template>
				<template v-if="column.key === 'status'">
					<a-switch :checked="record.status" checked-value="1" un-checked-value="0"
						@change="(checked: string | number) => handleStatus(checked, record)">
						<template #checkedChildren>正常</template>
						<template #unCheckedChildren>禁用</template>
					</a-switch>
				</template>
				<template v-if="column.key === 'options'">
					<a-space :size="8">
						<a-button size="small" @click="openModal('edit', record.id)">编辑</a-button>
						<a-popconfirm title="确认删除吗?" ok-text="确认" cancel-text="取消" @confirm="handleDelete(record.id)">
							<a-button type="primary" danger size="small">删除</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</a-table>
	</div>
	<!--  -->
	<DeptUserModal v-model="visible" :id="currentUserId" :title="title" />
	<!--  -->
	<contextHolder />
</template>

<script setup lang="ts">
import { ref, createVNode, watch } from 'vue';
import { type TableColumnType, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useCustomNotification } from "@/hooks/common/useCustomNotification";
import type { AnyObject } from "@/views/global";
import { fetchUsers } from '@/apis/admin/user';
import DeptUserModal from "@/components/admin/dept/DeptUserModal.vue";

interface User {
	id: number;
	avatar: string;
	nickName: string;
	sex: number;
	mobile: string;
	createTime: string;
	status: string;
}

const props = defineProps({
	deptId: {
		type: [Number, String],
		default: 0
	}
});

const columns: typeof TableColumnType[] = [
	{
		title: 'ID',
		dataIndex: 'id',
		key: 'id',
		align: 'center'
	},
	{
		title: '头像',
		dataIndex: 'avatar',
		key: 'avatar',
		align: 'center'
	},
	{
		title: '昵称',
		dataIndex: 'nickName',
		key: 'nickName',
		align: 'center'
	},
	{
		title: '手机号',
		dataIndex: 'mobile',
		key: 'mobile',
		align: 'center'
	},
	{
		title: '性别',
		dataIndex: 'sex',
		key: 'sex',
		align: 'center'
	},
	{
		title: '注册时间',
		dataIndex: 'createTime',
		key: 'createTime',
		align: 'center'
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		align: 'center'
	},
	{
		title: '操作',
		key: 'options',
		align: 'center'
	}
];
const data = ref<User[]>([]);
const loading = ref<boolean>(false);
const getUserList = () => {
	fetchUsers<User[]>({}).then(res => {
		loading.value = false;
		data.value = res.data;
	});
};
watch(
	() => props.deptId,
	(newValue, oldValue) => {
		if (newValue && newValue !== oldValue) {
			loading.value = true;
			getUserList();
		}
	}
);

// search
const activeKey = ref<string[]>(['1']);
const searchForm = ref<AnyObject>({
	nickName: '',
	sex: '',
	status: '',
	mobile: ''
});

// 通知
const { contextHolder, openNotifation } = useCustomNotification();

// 状态切换
const handleStatus = (checked: string | number, record: AnyObject) => {
	Modal.confirm({
		title: "提示",
		icon: createVNode(ExclamationCircleOutlined),
		content: `确认${checked === '1' ? '启用' : '禁用'}用户吗？`,
		okText: '确认',
		cancelText: '取消',
		onOk() {
			//  #TODO: API调用
			record.status = checked.toString();
		},
		onCancel() {
			record.status = !checked.toString();
		},
	});
};

// 删除
const handleDelete = (record: AnyObject) => {
	console.log(record);
	// #TODO:  API调用
	openNotifation({
		type: 'success',
		message: '删除成功',
	});
};

const visible = ref<boolean>(false);
const title = ref<string>('');
const currentUserId = ref<number | string>(0);
const openModal = (type: string, id?: number | string | undefined) => {
	title.value = type === 'add' ? '新增用户' : '编辑用户';
	currentUserId.value = id || 0;
	visible.value = true;
};

</script>

<style scoped lang="scss">
.page-header-container {
	.ant-form-inline {
		gap: 8px;
	}

	.ant-form-item {
		width: 240px;
	}
}

.table-operations {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.table-header-title {
		font-size: 18px;
	}
}

.ant-divider {
	margin: 8px 0;
}
</style>
